
#pageCtrl2.color-box {
  display: flex;
  flex-direction: column;
  height: 100%;

  &>div {
    display: flex;
  }

  .first-row {
    flex: 7;

    &-item {
      flex: 1;

      &:nth-child(1) {
        background-color: white;
        animation: changeBgColor 5s infinite reverse;
      }

      &:nth-child(2) {
        background-color: yellow;
      }

      &:nth-child(3) {
        background-color: #0ff;
      }

      &:nth-child(4) {
        background-color: rgb(96, 247, 96);
      }

      &:nth-child(5) {
        background-color: rgb(255, 0, 221);
      }

      &:nth-child(6) {
        background-color: red;
      }

      &:nth-child(7) {
        background-color: rgb(204, 0, 255);
      }
    }
  }
  @keyframes changeBgColor {
    0%{
      background-color: white;
    }
    100%{
      background-color: black;
    }
  }
  .second-row {
    flex: 1;

    &-item {
      flex: 1;

      &:nth-child(1) {
        background-color: rgb(204, 0, 255);
      }

      &:nth-child(2) {
        background-color: rgb(0, 0, 0);
      }

      &:nth-child(3) {
        background-color: rgb(255, 0, 221);
      }

      &:nth-child(4) {
        background-color: rgb(0, 0, 0);
      }

      &:nth-child(5) {
        background-color: #0ff;
      }

      &:nth-child(6) {
        background-color: rgb(0, 0, 0);
      }

      &:nth-child(7) {
        background-color: rgb(202, 201, 201);
      }
    }
  }

  .third-row {
    flex: 2;

    &-item {
      flex: 1;

      &:nth-child(1) {
        background-color: rgb(89, 0, 255);
      }

      &:nth-child(2) {
        background-color: rgb(255, 255, 255);
      }

      &:nth-child(3) {
        background-color: rgb(183, 0, 255);
      }

      &:nth-child(4) {
        background-color: rgb(0, 0, 0);
      }

      &:nth-child(5) {
        background-color: rgb(1, 15, 15);
      }

      &:nth-child(6) {
        background-color: rgb(0, 0, 0);
      }
    }
  }

}